<template>
	<navigatorComp title="祭拜历史" bgcColor="#121512" fontColor="#fff"></navigatorComp>

	<mescroll-uni
		:height="height + 'px'"
		:up="upOption"
		@init="mescrollInit"
		@down="myDownCallback"
		@up="upCallback"
	>
		<view class="historyList">
			<view class="historyItem" v-for="(item, index) in historyList">
				<view class="display_flex">
					<image
						:src="headUrl || 'http://112.124.50.179:8888/imgs/default_avater.png'"
						mode=""
						class="history_avater"
					></image>
					<view>
						<view class="history_info">
							<!-- <text style="max-width: 136rpx" class="singleLineOverflowHidden">
								{{ item.peopleName }}
							</text> -->
							<text style="margin-left: 8rpx">向</text>
							<text style="margin-left: 8rpx; color: #f3e0bb">
								{{ item.peopleName }}
							</text>
							<text style="margin-left: 8rpx">
								{{
									item.offeringType === 3 || item.offeringType === 2
										? '供奉了'
										: '进行了'
								}}
							</text>
							<text style="margin-left: 8rpx; color: #f3e0bb">
								{{ item.offeringName }}
							</text>
						</view>
						<view class="history_time">
							<text>{{ formatTimestamp(item.worshipTimestamp) }}</text>
							<text style="margin-left: 24rpx" v-if="item.leftTime">
								{{
									/\d/.test(item.leftTime)
										? '剩余：' + item.leftTime
										: item.leftTime
								}}
							</text>
						</view>
					</view>
				</view>
				<image :src="item.offeringImage" mode="" class="history_img"></image>
			</view>
		</view>
	</mescroll-uni>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref, reactive } from 'vue';
import navigatorComp from '/components/navigator/index.vue';
import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js';
import store from '@/store';
import { formatTimestamp } from '@/utils/time';
import WorshipApi from '@/API/worship';
const worshipApi = new WorshipApi();

const { mescrollInit, downCallback, getMescroll } = useMescroll(); // 调用mescroll的hook
const upOption = {
	page: {
		size: 10 // 每页数据的数量
	},
	noMoreSize: 4 //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
	// empty: {
	// 	use: false //不显示空图
	// }
};
const lastId = ref(0); //最后一个元素的id
const height = ref(0);
const historyList = ref([]);
const headUrl = store.state.userInfo.userInfo.headUrl;

onLoad(() => {
	// #ifdef MP-WEIXIN
	height.value =
		uni.getSystemInfoSync().screenHeight -
		getApp().globalData.bottom -
		getApp().globalData.navHeight;
	// #endif

	// #ifdef APP || H5
	height.value =
		uni.getSystemInfoSync().windowHeight -
		getApp().globalData.bottom -
		getApp().globalData.navHeight -
		uni.upx2px(88);
	// #endif
	console.log(height.value);
});

/**
 * 上拉加载
 */
const upCallback = (mescroll) => {
	worshipApi
		.getWorshipRecord({
			latestId: lastId.value
		})
		.then((res) => {
			const curPageData = res.data.worshipList || []; // 当前页数据
			console.log(curPageData);
			if (lastId.value === 0) historyList.value = []; //如果是第一页需手动制空列表
			historyList.value = historyList.value.concat(curPageData); //追加新数据\
			if (curPageData.length > 0) {
				lastId.value = curPageData[curPageData.length - 1].worshipId;
			}
			mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
		})
		.catch(() => {
			mescroll.endErr(); // 请求失败, 结束加载
		});
};

const myDownCallback = (mescroll) => {
	lastId.value = 0;
	downCallback();
};
</script>

<style lang="scss">
page {
	background-color: #121512;
	/* #ifdef H5 */
	padding-top: 0;
	/* #endif */
}

.historyList {
	padding: 32rpx;

	.historyItem {
		padding: 32rpx 24rpx;
		box-sizing: border-box;
		width: 100%;
		background: #292b2a;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 24rpx;

		.history_avater {
			border-radius: 50%;
			width: 80rpx;
			height: 80rpx;
			margin-right: 12rpx;
		}

		.history_info {
			font-weight: 400;
			font-size: 28rpx;
			color: #ffffff;
			line-height: 40rpx;
			display: flex;
		}

		.history_time {
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			line-height: 34rpx;
			margin-top: 6rpx;
		}

		.history_img {
			width: 80rpx;
			height: 80rpx;
		}
	}
}
</style>
